'''
1、定义：JavaScript是运行在浏览器端的脚本语言，是有浏览器解释执行的，简称js
       能够让网页和用户有交互功能，增加良好的用户体验效果
补充：前端开发的三大块
        html：负责网页结构
        css：负责网页样式
        JavaScript：负责网页行为
2、三种使用方式：
     行内式（主要用于事件）
     内嵌式
     外链式
       <head>
          <script>
               alert("2 内嵌式")
            </script>
            <script src=".\js\main.js"></script>
       </head>
       <body>
            <input type="button" value="按钮" onclick="alert('1 行内式')"
       </body>
       </head>
3、变量和数据类型：
     JavaScript是一种弱类型语言，不需要指定变量的类型
      ① 变量
            弱类型语言：
               data = 10
            强类型语言：
            int data = 10
      ② 数据类型
             数值：number
             字符串：string
             布尔：boolean
             声明未初始化：undefined
             空对象:null

             一种复合类型：object
      ③ 操作：
          <head>
             <script>
                var iNum = 10;
                var fNum = 10.1;
                var sName = "itcast";
                var bIsTrue = true;
                var unData;
                var nullData = null;
                var oPenson = {
                    name:"itcast",
                    age : 12
                }
                alert(typeof(oPenson))
                console.log(oPenson.name)
                console.log(oPenson.age)
             </script>
          </head>
4、函数定义：
      <head>
         <script>
             function fnShow(){
                 alert("这是一个函数");
                 console.log("hello");
            }
            fnShow();
            function fnSum(iNum1, iNum2){
                var iNum1, iNum2;
                var iResult = iNum1 + iNum2;
                iResult ++
                return iResult
            }
            var iNum = fnSum(10, 20)
            alert(iNum)
         </script>
      </head>
5、逻辑运算符：
      <head>
        <script>
            var iScore = 60;
            if (iScore < 60){
                alert("不及格")
            }else if(iScore === 60){
                alert("刚好及格")
            }else{
                alert("优秀")
            }
        </script>
      </head>
6、获取标签元素：
      <head>
        <script>
            window.onload = function(){
                var oBtn = document.getElementById("btn");
                alert(oBtn);
            }
        </script>
      </head>
      <body>
        <input type="button" value="按钮" id="btn">
      </body>
      主动事件：获取标签元素
            <head>
                <script>
                    function fnLoad(){
                        var oBtn = document.getElementById("btn")
                        alert(oBtn)
                    }
                </script>
            </head>
            <body>
                <input type="button" value="按钮" id="btn" onclick="fnLoad()">
            </body>
7、操作标签元素属性：
      <head>
        <script>
            window.onload=function(){
                var oDiv = document.getElementById("mydiv");
                alert(oDiv.innerHTML);
                oDiv.innerHTML = "阳光正好";
            }
        </script>
      </head>
      <body>
        <div id="mydiv">今天是个好日子！</div>
      </body>
8、数据的定义和操作：
     ① 定义数据的两种方式：
          <head>
            <script>
                # 定义数据的两种方式：
                    var aArray = new Array(1, 2, 3);
                    console.log(aArray);
                    var aArray = [11, 22, 33];
                    console.log(aArray);
                # 多维数组
                    var aArray = [[1, 2], [3, 4]];
                    alert(aArray[1]);
                    aArray[0][0] = 100;
                    alert(aArray.length);
                    aArray.push("itcast");
                # pop只会自动删除最后一个数据
                    aArray.pop()
                # 起始位置，数据个数，替换删除数据（删除数据位置直接补上）
                    aArray.splice(1, 2, "itcast")
            </script>
          </head>
9、循环语句：
     <head>
        <script>
            # for循环
                var aArray = [1, 2, 3]
                for(var index = 0;index < aArray.length;index++){
                    var result = aArray[index];
                    alert(result);
                }
            # while循环
                var index = 0;
                while(index < aArray.length){
                    var result = aArray[index];
                    alert(result)
                    index++;
                }
            # do while循环(无论条件是否成立，都会执行一次代码)
                var index = 0;
                do{
                    var result = aArray[index];
                    alert(result);
                    index++;
                }while(index > aArray.length);
        </script>
     </head>
10、字符串拼接
     <head>
        <script>
            var iNum = 10;
            var fNum = 10.01;
            var sStr = "123";
            var iResult1 = iNum +sStr;
            var iResult2 = fNum +sStr;
            var iResult3 = iNum +parseInt(sStr);
            alert(iResult1);
        </script>
     </head>
11、定时器：
     <head>
        <script>
             # 1 定时器
                function fnShow(name){
                    alert(name);
                    // 消除定时器
                    clearTimeout(tId);
                }
                var tId = setTimeout(fnShow, 2000, "itcast");
             # 2 重复定时器
                function fnShow(name){
                    alert(name);
                }
                function fnStop(){
                    clearInterval(tId);
                }
                var tId = setInterval(fnShow, 5000, "itcast");
        </script>
     </head>
     <body>
        <input type="button" value="停止" onclick="fnStop()">
     </body>
'''